<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="../static/libs/css/bootstrap.css">
      <link rel="stylesheet" href="../static/libs/css/header.css">
</head>

<body>
      <header>
            <div class="container">
                  <p>
                        <a href="./index.html">Hi,欢迎来到洋码头！</a>
                        <a href="./login.html">我是买手</a>
                  </p>
                  <ul>
                        <li><a href="./login.html">登录</a></li>
                        <li><a href="./register.html">注册</a></li>
                        <li><a href="#">购物车</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">个人中心</a></li>
                        <li><a href="#">规则&公告</a></li>
                  </ul>
            </div>
      </header>
      <div class="logo">
            <a href="#">
                  <img src="https://s2.ymatou.com/home/4aa0780b5ffeee46a01f132052fdb71a.png" alt="">
            </a>
      </div>
            
      
      <div class="container">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01cd455de8ed0ea8012138534ff59c.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630049123&t=1da6bf9380b5750dcaefa1e8e94ae179" alt="">
            <form action="javascript:void(0)" class="form-horizontal col-md-4 col-md-offset-4">
                  <h2 class="form-signin-heading">请注册</h2>
                  <div class="form-group">
                        <label for="username" class="control-label">用户名</label>
                        <input type="text" class="form-control" id="username" value="zhen123">
                  </div>
                  <div class="form-group">

                        <label for="password" class="contral-label">密码</label>
                        <input type="text" class="form-control" id="password" value="123456">
                  </div>
                  <div class="form-group">

                        <label for="rpassword" class="contral-label">请重新输入密码</label>
                        <input type="text" class="form-control" id="rpassword" value="123456">
                  </div>
                  <div class="form-group">

                        <label for="nickname" class="contral-label">用户昵称</label>
                        <input type="text" class="form-control" id="nickname" value="zhouxingchi">
                  </div>

                  <button id="btn" class="btn btn-primary btn-sm">注册</button>
            </form>
      </div> <!-- /container -->




      <script src="../static/libs/javascripts/jQuery.js"></script>
      <script src="../static/libs/javascripts/cookie.js"></script>
      <script>
            // 业务 : 
            // - 1. 点击按钮发送请求; 
            //    - 发送请求的方式 : 

            //         1. xhr   发送请求; 
            //         2. fetch 发送请求; 

            // - 2. 接受后端返回的注册响应; 
            // - 3. 根据响应去显示对应的内容; 

            var btn = document.getElementById("btn");
            var username = document.getElementById("username");
            var password = document.getElementById("password");
            var rpassword = document.getElementById("rpassword");
            var nickname = document.getElementById("nickname");

            btn.onclick = async function () {
                  // 发起请求先明确几件事情 : 
                  // - 1. 请求路径 ; 
                  // - 2. 请求方式; 
                  // - 3. 请求参数 ; 
                  let url = "http://127.0.0.1:8888/users/register";
                  let options = {
                        type: "POST",
                        headers: {
                           
                        },
                        data: {
                              username:username.value,
                              password:password.value,
                              rpassword:rpassword.value,
                              nickname: nickname.value
                        }
                  };

                  $.ajax(url, options)
                  .done(function (data) {
                        if (data.code === 1) {
                              alert("注册成功，马上为您跳转到登录页面");
                              setTimeout(function () {
                                    location.href = "./login.html";
                              }, 2000)
                        } else {
                              alert(data.message);
                        }
                  })
            }


      </script>

</body>

</html>